﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>实现需求3.3</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#image_file").change(function(){
                    var file = $(this)[0].files[0];
                    $("img#image_1").attr("src", URL.createObjectURL(file));
                    }); 
                $("button#button_1").click(function(){
                    var formData = new FormData($("#upload_form")[0]);
                    $.ajax({
                        url: "/get_drawedImage",
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(return_data){
                            $("img#image_2").attr("src", "data:image/jpeg;base64," + return_data['image_base64_string'])
                            },
                        error: function(return_data){
                            alert("上传失败!")
                            }
                        })   
                    });
                }); 
        </script>
    </head>
    
    <body>
        <form id="upload_form" enctype="multipart/form-data">
            <input type="file" name="input_image" id="image_file"/>
        </form>
        <div>
            <p>原始图片<p>
            <img src="" id="image_1"/>
        </div>
        <div>
            <p>目标检测结果图<p>
            <img src="" id="image_2"/>
        </div>
        <button id="button_1">上传图片并检测</button>
    </body>
</html>